<template>
  <div class="wapper">
    <div class="box">
      <div class="content">
        <h2>忘记密码</h2>
        <form @submit.prevent="handleForgotPassword">
          <!-- 表单部分 -->
          <div>
            <input type="email" placeholder="邮箱" v-model="email" />
          </div>
          <div>
            <input type="text" placeholder="用户名" v-model="username" />
          </div>
          <div>
            <input type="password" placeholder="新密码" v-model="newPassword" />
          </div>
          <div>
            <input type="submit" value="确认" />
          </div>
        </form>
        <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
      </div>
      <a href="/login" class="btns register" @click="resetattempt">返回登录</a>
      <!-- 自定义成功弹窗 -->
      <transition name="modal-fade">
        <div v-if="showSuccessModal" class="modal-overlay">
          <div class="modale">
            <h3>密码修改成功</h3>
            <p class="my-4">{{ successMessage }}</p>
            <!-- 按钮右对齐 -->
            <div class="text-end">
              <button class="modal-button" @click="redirectToLogin">
                确定并返回登录
              </button>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>

import axios from "axios";
export default {
  data() {
    return {
      email: "",
      username: "",
      newPassword: "",
      errorMessage: "", // 用于存储错误信息
      showSuccessModal: false, // 控制成功弹窗的显示
      successMessage: "",
      attemptCount: 0, // 记录尝试次数
    };
  },
  methods: {
    async handleForgotPassword() {
      this.errorMessage = "";

      // 如果邮箱为空
      if (!this.email) {
        this.errorMessage = "请输入注册时的邮箱";
        return;
      }

      // 如果用户名为空
      if (!this.username) {
        this.errorMessage = "请输入用户名";
        return;
      }

      // 如果新密码为空
      if (!this.newPassword) {
        this.errorMessage = "请输入新密码";
        return;
      }

      try {
        // 发送 POST 请求到后端忘记密码的 API
        const response = await axios.post(
          "http://localhost:8000/api/forgotpwd/",
          {
            email: this.email,
            username: this.username,
            new_password: this.newPassword,
          }
        );
        // 设置成功消息并显示自定义弹窗
        this.successMessage = response.data.message || "密码修改成功";
        this.showSuccessModal = true; // 显示成功弹窗
      } catch (error) {
        // 检查是否存在用户名不正确且已经触发了邮件发送操作
        if (error.response?.data?.error.includes("账号信息发送至您的邮箱")) {
          // 用户名不正确，但已触发邮件发送
          this.errorMessage = error.response.data.error; // 显示邮件已发送的信息
        } else {
          // 常规错误处理
          this.errorMessage = error.response?.data?.error || "密码修改失败";
          this.attemptCount++;
        }
      }
    },
    redirectToLogin() {
      this.showSuccessModal = false; // 关闭弹窗
      // 跳转到登录页面
      this.$router.push("/login");
    },
    async resetattempt() {
      this.showSuccessModal = false; // 关闭弹窗

      try {
        // 确保接口调用并在请求完成后打印调试日志
        await axios.post("http://localhost:8000/api/resetattempt/");
        console.log("尝试次数重置成功"); // 调试日志

        // 确保请求完成之后再跳转
        setTimeout(() => {
          this.$router.push("/login");
        }, 500); // 延迟跳转以防止未触发接口
      } catch (error) {
        console.error("尝试次数重置失败", error);

        // 发生错误后依然可以跳转
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
      }
    },
  },
};
</script>

<style src="../../assets/css/home.css" scoped></style>
